<template>
  <div>
    <!-- 搜索历史 -->
    <div>
      <van-cell title="搜索历史">
        <!-- 使用 right-icon 插槽来自定义右侧图标 -->
        <template #right-icon>
          <!-- 点击删除图标，清空搜索历史 -->
          <van-icon name="delete" class="delete-o-icon" @click="delHistory"/>
        </template>
      </van-cell>
      <!-- 搜索历史框 -->
      <div>
          <span v-for="(item,index) in historyList" :key="index" class="span1">
            <span class="span2" @click="putHistory(item.history)">{{item.history}}</span>
          </span>
      </div>
    </div>
    <!-- 搜索发现 没有写-->
    <div>
      <van-cell title="搜索发现" icon="search">
        <!-- 使用 right-icon 插槽来自定义右侧图标 -->
        <template #right-icon>
          <van-icon name="browsing-history" class="browsing-history-o-icon" />
        </template>
      </van-cell>
    </div>
  </div>
</template>

<script>
export default {
  // 父传子接收数据
  props: ['value', 'historyList'],
  // 子传父定义事件
  emits: ['getHistory'],
  methods: {
    // 删除搜索历史
    delHistory () {
      this.$http({
        url: '/picture/delhistory',
        method: 'GET'
      })
      // this.historyList = []
    },
    // 父传子
    putHistory (history) {
      this.$emit('getHistory', history)
    }
  }
}
</script>

<style lang="less" scoped>
  .delete-o-icon{
    font-size: 16px;
    line-height: inherit;
  }
  .span1{
    margin: 20px;
    .span2{
      border: 0px;
    border-radius: 10px;
      background-color:rgb(218, 218, 218);
    }
  }
</style>
